// 驼峰式
import camelCase from 'lodash/camelCase'
// 短横线式
import kebabCase from 'lodash/kebabCase'

export default (Vue) => {
  // require.context是webpack的一个方法,可以获取文件的上下文
  const requireComponent = require.context(
    // 其组件目录的相对路径
    './',
    // 是否进行深度遍历
    false,
    // 匹配基础组件文件名的正则表达式
    /[a-zA-Z]\w+\.vue$/
  )
  requireComponent.keys().forEach(fileName => {
    // requireComponent(fileName)获取组件配置
    const componentConfig = requireComponent(fileName)
    // 获取组件的短横线式命名
    const componentName = kebabCase(
      camelCase(
        // 文件相对路径 -> 获取和目录深度无关的文件名
        fileName
          .split('/')
          .pop()
          .replace(/\.\w+$/, '')
      )
    )
    // 全局注册组件
    Vue.component(
      componentName,
      // require es6 export default导出模块的时候就需要用到componentConfig.default
      componentConfig.default || componentConfig
    )
  })
}

// use in main.js
// import PublicComponents from '@/components'
// Vue.use(PublicComponents)
